<template>
  <div>
    <div class="container">
      <div class="forms-container">
        <div class="signin-signup">
          <form action="#" class="sign-in-form">
            <h2 class="title">登录</h2>
            <div class="input-field">
              <i class="fas fa-user"></i>
              <input type="text" placeholder="用户名" />
            </div>
            <div class="input-field">
              <i class="fas fa-lock"></i>
              <input type="password" placeholder="密码" />
            </div>
            <input type="submit" value="登 录" class="btn solid" />
            <p class="social-text">或者通过以下平台登录</p>
            <div class="social-media">
              <a href="#" class="social-icon">
                <i class="fab fa-weixin"></i>
              </a>
              <a href="#" class="social-icon">
                <i class="fab fa-qq"></i>
              </a>
              <a href="#" class="social-icon">
                <i class="fab fa-alipay"></i>
              </a>
              <a href="#" class="social-icon">
                <i class="fab fa-github"></i>
              </a>
            </div>
          </form>
          <form action="#" class="sign-up-form">
            <h2 class="title">注册</h2>
            <div class="input-field">
              <i class="fas fa-user"></i>
              <input type="text" placeholder="用户名" />
            </div>
            <div class="input-field">
              <i class="fas fa-envelope"></i>
              <input type="email" placeholder="邮箱" />
            </div>
            <div class="input-field">
              <i class="fas fa-lock"></i>
              <input type="password" placeholder="密码" />
            </div>
            <input type="submit" class="btn" value="注 册" />
            <p class="social-text">或者通过以下平台注册</p>
            <div class="social-media">
              <a href="#" class="social-icon">
                <i class="fab fa-weixin"></i>
              </a>
              <a href="#" class="social-icon">
                <i class="fab fa-qq"></i>
              </a>
              <a href="#" class="social-icon">
                <i class="fab fa-alipay"></i>
              </a>
              <a href="#" class="social-icon">
                <i class="fab fa-github"></i>
              </a>
            </div>
          </form>
        </div>
      </div>

      <div class="panels-container">
        <div class="panel left-panel">
          <div class="content">
            <h3>新用户?</h3>
            <p>好兄弟,你来了,我们的网站就差你的加入了,点击下方注册按钮加入我们吧!!</p>
            <button class="btn transparent" id="sign-up-btn">注册</button>
          </div>
          <img src="../access/img/log.svg" class="image" alt />
        </div>
        <div class="panel right-panel">
          <div class="content">
            <h3>已经是我们自己人了吗?</h3>
            <p>那好兄弟,你直接点击登录按钮,登录到我们这优秀的系统里!!</p>
            <button class="btn transparent" id="sign-in-btn">登 录</button>
          </div>
          <img src="../access/img/register.svg" class="image" alt />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Register",
    data() {
        return {
       
        };
    },
  mounted() {
    const sign_in_btn = document.querySelector("#sign-in-btn");
    const sign_up_btn = document.querySelector("#sign-up-btn");
    const container = document.querySelector(".container");

    sign_up_btn.addEventListener("click", () => {
      container.classList.add("sign-up-mode");
    });

    sign_in_btn.addEventListener("click", () => {
      container.classList.remove("sign-up-mode");
    });
  }
};
</script>
<style scoped>
@import url("../access/login.css");
</style>